<template>
    <div id="AddCampusView">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>校区名</td>
                    <td>
                        <!-- <el-input v-model="campusInfo.campusName" placeholder="校区名"></el-input> -->
                        <input name="校区名" v-model="campusInfo.campusName" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('校区名') }" type="text" placeholder="校区名">
                        <i v-show="errors.has('校区名')" class="fa fa-warning"></i>
                        <span v-show="errors.has('校区名')" class="help is-danger">{{ errors.first('校区名') }}</span>
                    </td>
                    <td>位置</td>
                    <td>
                        <input name="城市" v-model="campusInfo.campusLocation" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('位置') }" type="text" placeholder="位置">
                        <i v-show="errors.has('位置')" class="fa fa-warning"></i>
                        <span v-show="errors.has('位置')" class="help is-danger">{{ errors.first('位置') }}</span>
                    </td>
                </tr>
                <tr>
                    <td>校区负责人</td>
                    <td>
                        <!-- <el-input v-model="campusInfo.manager" placeholder="校区负责人"></el-input> -->
                        <input name="校区负责人" v-model="campusInfo.manager" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('校区负责人') }" type="text" placeholder="校区负责人">
                        <i v-show="errors.has('校区负责人')" class="fa fa-warning"></i>
                        <span v-show="errors.has('校区负责人')" class="help is-danger">{{ errors.first('校区负责人') }}</span>
                    </td>
                    <td>联系电话</td>
                    <td>
                        <!-- <el-input v-model="campusInfo.mobile" placeholder="联系电话"></el-input> -->
                        <p class="control has-icon has-icon-right">
                            <input name="phone" v-model="campusInfo.mobile" v-validate="'required|phone'" :class="{'input': true, 'is-danger': errors.has('phone') }" type="text" placeholder="Phone">
                            <i v-show="errors.has('phone')" class="fa fa-warning"></i>
                            <span v-show="errors.has('phone')" class="help is-danger">{{ errors.first('phone') }}</span>
                        </p>
                    </td>
                </tr>
                <tr>
                    <td>邮箱地址</td>
                    <td>
                        <!-- <el-input v-model="campusInfo.email" placeholder="邮箱地址"></el-input> -->
                            <p :class="{ 'control': true }">
                                <input  v-model="campusInfo.email" v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email">
                                <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
                            </p>
                    </td>
                    <td>城市</td>
                    <td>
                    <el-select @click.native="loadCityList" v-model="campusInfo.cityId">
                        <el-option v-for="(item,key) in cityList" :key="key" :label="item.cityName" :value="item.id"></el-option>
                    </el-select>
                    </td>
                </tr>
                <tr>
                   <td >描述</td>
                    <td colspan="3">
                        <el-input v-model="campusInfo.description" placeholder="描述"></el-input>
                    </td>
                </tr>
            </tbody>
        </table>
        <el-row style="margin-top:20px;">
            <el-col offset="10">
                <el-button type="danger" @click="commit">提交</el-button>
                <el-button type="primary" @click="cancel">取消</el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    props: {
        isAddnew: {
            type: Boolean,
            default: true
        },
        isUpdate: {
            type: Boolean,
            default: false
        },
        updateInfo: {
            type: Object
        }
    },
    data(){
        return {
            offset: 8,
            span: 8,
            dialogVisible: true,
            cityList: [],
            campusInfo: {
                campusName: '',
                campusLocation: '',
                manager: '',
                mobile: '',
                email: '',
                description: '',
                cityId: '',
                token: this.$token
            }
        }
    },
    methods: {
        commit(){
            // 提交信息
            //插入新校区 /backstage/campus/insert
            if(this.isAddnew){
                var insertURL = window.baseURL+"/backstage/campus/insert";
                this.$http.post(insertURL,this.$qs.stringify(this.campusInfo))
                .then((response)=>{
                    if(response.data.success){

                    }
                    this.$emit('hideView');
                })
                .catch((error)=>{
                })
            }
            // 更新信息 /backstage/campus/update
            if(this.isUpdate){
                var updateURL = window.baseURL+"/backstage/campus/update"
                 this.$http.post(updateURL,this.$qs.stringify(this.campusInfo))
                .then((response)=>{
                    this.$emit('hideView')
                })
                .catch((error)=>{
                })
            }
        },
        cancel(){
            this.$emit('hideView')
        },
        loadCityList(){
            var cityURL = window.baseURL + "/backstage/city/findByPage?token="+this.$token;
            var cityPromise = this.loadCity(cityURL);
            cityPromise.then((response)=>{
                this.cityList = response.data.data.list.results;
            })
        }
    },
    created(){
        if(this.isUpdate){
            this.campusInfo = this.updateInfo;
        }
    }
}
</script>

<style lang="scss" scoped>
#AddCampusView {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0px;
    top: 0px;
    padding: 40px;
    background: white;
    z-index: 101;
    table {
        tr {
            td {
                &:nth-child(2n-1){
                    text-align: center;
                    vertical-align: middle;
                }
            }
        }
    }
}
</style>

